<template>
	<div class="decorate-goodsSearch"
    :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'">
    <div class="search-container">
      <div class="search-wrapper" :style="tplItemData.is_search_button ? 'width: 82%':''">
        <div class="icon miniprogram" @click="searchList">
          <img class="img_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
        </div>

        <!-- TODO 微分销与小程序差别：小程序回车搜索confirm -->
        <input v-if="tplItemData.is_search_button" confirm-type="search" @confirm="searchList" ref="inputVal" v-model="keyword" type="text" placeholder="请输入姓名/产品名关键词搜索"/>
        <input v-else @confirm="searchList" confirm-type="search" ref="inputVal" v-model="keyword" type="text" :placeholder="tplItemData.has_duodian?'商品搜索：请输入商品、店铺名称':'商品搜索：请输入商品关键字'"/>

        <!-- <input @keyup.enter="searchList" v-model="keyword" type="text" :placeholder="tplItemData.has_duodian?'商品搜索：请输入商品、店铺名称':'商品搜索：请输入商品关键字'" v-else/> -->
      </div>  
      <div class="searchBtn" v-if="tplItemData.is_search_button" @click.stop="searchList">
        <div>搜索</div>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    components: {
    },
    props: {
      tplItemData: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        keyword: '',
      }
    },
    created() {
      // // console.log(this.tplItemData)
    },
    methods: {
      searchList() {
        // TODO 供应商店铺页面搜索时带供应商id
        if (this.$route.path == '/supplier') {
          const supplier = this.$route.query.id
          this.$JumpName(this, 'item-list', { title: this.keyword, supplier: supplier })
        } else if (this.$route.path == '/group' && this.$route.query.supplier) {
          // 供应商的商品分组
          const supplier = this.$route.query.supplier
          this.$JumpHref(this, 'item-list', { title: this.keyword, supplier: supplier })
        } else {
          this.$JumpName(this, 'item-list', { title: this.keyword })
        }
      }
    }
  })
</script>

<style lang="scss">
@import "src/styles/mixin";
.decorate-goodsSearch{
  .search-container {
    position: relative;
    .searchBtn {
      position: absolute;
      right: 0px;
      top: 0;
      height: 72px;
      // line-height: 72px;
      z-index: 10;
      background-color: #ee7a48;
      border-radius: 20px;
      color: #fff;
      // padding: 20px 0;
      div {
        // border-left: 2px solid #ccc;
        padding: 0 30px;
        position: relative;
        top: 24px;
        font-size: 28px
      }
    }
  }
  .search-wrapper{
    position:relative;
    width: 100%;
    height: 72px;
    line-height: 72px;
    border-radius: 72px;
    font-size: 0;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 20px;
    .icon {
      margin-right: 10px;
      height:32px;
      &.miniprogram {
        line-height: initial;
        top:20px;
      }
      .icon_search, .img_search{
        width:32px;
        height:32px;
      }
    }
    @include placeColor(#999);
    input {
      display: inline-block;
      width:100%;
      line-height: 40px;
      height: 40px;
      font-size: 28px;
      padding:0 10px;
      border:0;
      background: transparent;
    }
  }
}
</style>